<template>
  <div id="infor">
    <nav-header @hiddenCode="hiddenCode" ref="code"></nav-header>
    <div class="infor-content">
      <div class="gift-top">
        <div class="gift-type">
          <div class="gift-title">加速币：{{ speed.money }}个</div>
          <div class="gift-btn" @click="reChange">充值</div>
          <div class="gift-btn" @click="reflect">提现</div>
          <div class="gift-detail" @click="showDetail('加速币收支明细')">收支明细>></div>
        </div>
        <div class="gift-type ygb">
          <div class="gift-title">荧光棒：{{ gift.stick }}个</div>
          <div class="gift-detail" @click="showDetail('荧光棒收支明细')">收支明细>></div>
        </div>
      </div>
      <div class="gift-bottom">
        <div class="gift-tag">
          <div class="gift-day">每日任务(9)</div>
          <div class="gift-prompt">完成每日任务，获取荧光棒~</div>
        </div>
        <div class="gift-task">
          <div class="gift-icons">
            <div class="gift-single" v-for="(item, index) in task" :key="index">
              <div class="gift-header">
                <img :src="item.img" alt />
              </div>
              <div class="gift-content">
                <div class="task-content">{{ item.taskContent }}</div>
                <div class="gift-num">{{ item.taskReward }}</div>
              </div>
              <div
                class="gift-complete"
                v-if="item.taskState == 0"
                @click="finishTask(item.taskIndex)"
              >去完成</div>
              <div
                class="gift-complete getGift"
                v-else-if="item.taskState == 1"
                @click="getGift(item.taskId, item.rewardNumber)"
              >领取</div>
              <div class="gift-complete finish" v-else>已完成</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="successPay"></div>
    <Paydetail ref="payDetail" :text="text"></Paydetail>
    <Paymodal ref="payModal" :isRechange="isRechange" :speedNum="speed.money"></Paymodal>
    <nav-footer ref="child"></nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import Paymodal from "../components/Paymodal";
import Paydetail from "../components/Paydetail";
import QRCode from "qrcodejs2";
import { provinceAndCityData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      tags: [{ name: "来闻认证" }],
      gift: "",
      speed: "",
      task: "",
      text: "",
      codeUrl: "",
      codeShow: false,
      codeOpen: true,
      isRechange: 0,
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
    Paymodal,
    Paydetail,
  },

  created() {
    //任务列表
    this.$post(`/laiwen/task/frontend/tasklist`, {}).then((res) => {
      this.task = res.taskList;
    });
    //查询荧光棒数量
    this.$fetch(`/laiwen/personal/frontend/stick`, {}).then((res) => {
      this.gift = res;
      console.log(res);
    });
    this.initSpeed();
  },
  computed: {
    getInfor() {
      return { ...this.$store.state.infromation };
    },
    successPay() {
      if (this.getInfor.payInformation == "success") {
        this.codeOpen = false;
        this.codeShow = false;
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    initSpeed() {
      //查询加速币数量
      this.$fetch(`/laiwen/personal/frontend/money`, {}).then((res) => {
        this.speed = res;
      });
    },
    //检测支付成功隐藏
    hiddenCode() {
      this.codeShow = this.$refs.code.codeShow;
      this.codeOpen = this.$refs.code.codeShow;
    },
    //充值模态窗
    reChange() {
      this.isRechange = 0;
      this.$refs.payModal.clear();
    },
    //提现
    reflect() {
      this.isRechange = 1;
      this.$refs.payModal.clear();
    },
    //收支明细
    showDetail(e) {
      this.text = e;
      this.$refs.payDetail.clear();
    },
    //去完成任务
    finishTask(e) {
      console.log(e);
      switch (e) {
        case 1:
          this.$router.push({
            path: "/index",
          });
          break;
        case 2:
          this.$router.push({
            path: "/index",
          });
          break;
        case 3:
          this.$router.push({
            path: "/editor",
          });
          break;
        case 4:
          this.$router.push({
            path: "/editor",
          });
          break;
        case 5:
          this.$router.push({
            path: "/index",
          });
          break;
        case 6:
          this.$router.push({
            path: "/index",
          });
          break;
        case 7:
          this.$router.push({
            path: "/index",
          });
          break;
        case 8:
          this.$router.push({
            path: "/index",
          });
          break;
        case 9:
          this.reChange();
          break;
      }
    },
    //领取礼物
    getGift(e, number) {
      let res = [...this.task].find((item) => item.taskId == e);
      this.$set(res, "taskState", 2);
      this.$message({
        type: "success",
        message: `祝贺获得${number}根荧光棒`,
      });
      this.$post(`/laiwen/task/frontend/gotask?taskId=${e}`, {}).then((res) => {
        let result = (this.gift.stick += number);
        this.$set(this.gift, "stick", result);
      });
    },
    //根据url生成二维码
    // qrcode(url) {
    //   let qrcode = new QRCode("qrcode", {
    //     width: 132,
    //     height: 132,
    //     text: url, // 二维码地址
    //     colorDark: "#000",
    //     colorLight: "#fff",
    //   });
    // },
    //获取二维码路径
    // getUrl() {
    //   this.codeUrl = this.$refs.payModal.codeUrl;
    //   if (this.codeUrl == "") {
    //     this.codeShow = false;
    //   } else {
    //     this.codeShow = true;
    //     this.codeOpen = true;
    //     this.$nextTick(() => {
    //       this.qrcode(this.codeUrl);
    //     });
    //   }
    //   console.log(this.codeShow);
    // },
    //轮询支付状态
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/gift.css"></style>
